
window.onload=function(){
    console.log('window.onload');
}

function doClickSrcTest(event){
    //测试事件源与事件侦听所挂元素关系
    console.log('doClickSrcTest,event:',event);
    let srcElement = event.srcElement;
    console.log('doClickSrcTest,event.srcElement:',srcElement);
    let target = event.target;
    console.log('doClickSrcTest,event.target:',target);
    let eventsrc = event.srcElement || event.target;
    //console.log('doClickSrcTest,eventsrc.onclick:',eventsrc.onclick);
    //console.log('doClickSrcTest,eventsrc.onclick.nodeValue:',eventsrc.onclick.nodeValue); undefined
    //console.log('doClickSrcTest,window.doClickSrcTest:',this.doClickSrcTest);
    // if (eventsrc.onclick != null && eventsrc.onclick.nodeValue=='doClickSrcTest(event)'){
    //     console.log('doClickSrcTest,this is event-handler;');
    // };
    if (eventsrc.tagName == "DIV" && eventsrc.attributes.onclick && eventsrc.attributes.onclick.nodeValue=='doClickSrcTest(event)'){
         console.log('doClickSrcTest,this is event-handler;');
    };
    let attr_cnt = eventsrc.attributes.length;
    console.log('doClickSrcTest,eventsrc.attributes.length:',attr_cnt);
    //console.log('doClickSrcTest,eventsrc.attributes.onclick:',eventsrc.attributes.onclick);
    for (let n=0;n<attr_cnt;n++){
        let attrx = eventsrc.attributes[n];
        console.log('doClickSrcTest,attributes['+n+']:'+attrx.name+'='+attrx.value+',');
        //console.dir(attrx); //attrx是一个 name = value 对
    };//可以通过attributes判断当前事件触发源是什么元素[含：id,class,事件等]
    
    let computedStyle =  getComputedStyle(srcElement);
    console.log('doClickSrcTest,获取计算后的样式computedStyle:',computedStyle);
    
}

function dragstart(event){
    console.log('dragstart,event:',event);
    let id = event.target.id;
    console.log('dragstart,id,event:',id,event);
    event.dataTransfer.setData("Text", id);
    //event.preventDefault();
    //event.stopPropagation();
}

function dragend(event){
    console.log('dragend,event:',event);
}


function dragenter(event){
    console.log('dragenter,event:',event);
    event.dataTransfer.dropEffect = "copy"; //copy move none
}

function dragover(event) {
    event.preventDefault();//取消dragover的默认行为，才会有drop事件
}

function dragleave(event){
    console.log('dragleave,event:',event);
    event.dataTransfer.dropEffect = "none";
}

function drop(event){
    console.log('drop,event:',event);
    let srcElement = event.srcElement;
    console.log('drop,event.srcElement:',srcElement);
    let target = event.target;
    console.log('drop,event.target:',target);
    let isDropToParent = true;   //false:要拖中目标才加入子元素；true:拖入元素层，也要加到上层的子元素中;
    let dropTarget = null;
    if (! srcElement.ondrop){
        console.log('drop,! ondrop,return;');
        if (!isDropToParent)
            return; //阻止拖入元素中
        let candropParNode = target.parentNode; 
        while (candropParNode!=null){
            if (candropParNode.ondrop){
                dropTarget = candropParNode;
                break;
            };
            candropParNode = candropParNode.parentNode; //再向上一层
        }
    }else{
        dropTarget = srcElement;
    };
    //event.preventDefault();
    //event.stopPropagation();
    if (!dropTarget){
        return;
    }
    
    var data = event.dataTransfer.getData("Text");
    console.log('drop,data:',data);
    let srccomp = document.getElementById(data);
    if (srccomp){
        let newnode = srccomp.cloneNode(true); //如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
        //console.log('drop,newnode.old-id:',newnode.id);
        let newid = Math.random();
        newnode.id = newid;
        console.log('drop,newid,newnode:',newnode.id,newnode);
        dropTarget.appendChild(newnode);
        let newele = document.getElementById(newid);
        newele.draggable=false;
        //newele.removeEventListener('dragstart',dragstart);
        newele.ondragstart=null;
        newele.addEventListener("click",doeleclick,false);
        console.log('drop,newele:');
        console.log(newele);
        console.dir(newele);
        
    }
        
}

//通过独立类文件 draghandler.js 来处理8个拖柄操作

function doeleclick(event){
    let eleNode = event.srcElement || event.target;
    console.log('doeleclick,event.srcElement:');
    console.dir(eleNode);
    let tagbind = eleNode.tagbind;
    if (!tagbind){
        tagbind = DragHandler.bindToElement(eleNode);
        eleNode.tagbind = tagbind;
    }
    console.log('doeleclick,tagbind:',tagbind);
    event.preventDefault();
    event.stopPropagation();   
     
}
